// 导入.vue组件，导出一个函数，方便我们直接以函数的方式来调用组件

// 1. 导入组件
// ----- 显示 ------
// 2. 根据组件创建虚拟节点. const vnode = createVNode(XtxMessage, { type, text })
// 3. 准备一个DOM容器
// 4. 把虚拟节点渲染DOM容器中. render(vnode, div)
// -----隐藏DOM-----
// 点击确定，取消 组件消失
import { createVNode, render } from 'vue'
import XtxConfirm from './xtx-confirm.vue'
// 准备一个dom容器
const div = document.createElement('div')
div.setAttribute('class', 'xtx-Confirm-wrapper')
document.body.appendChild(div)

export default ({ title, text }) => {
  // 整体返回一个promise
  return new Promise((resolve, reject) => {
    const submitCallback = () => {
      // 关闭组件
      render(null, div)
      resolve()
    }
    const cancelCallback = () => {
      // 关闭组件
      render(null, div)
      reject(new Error('取消'))
    }
    // 第二个参数就是props
    // 用props做初始化
    const vnode = createVNode(XtxConfirm, { title, text, submitCallback, cancelCallback })
    render(vnode, div)
  })
}
